<template>
  <div class="write-email-wrapper">
    <div class="back">
      <span @click="back"><arrow-left-outlined /></span>
    </div>
    <div class="write-email-page">
      <div class="write-email-input-wrapper" style="border-bottom: none;">
        <span class="email-send-type">回复</span>
        <a-switch v-model:checked="lockChecked" />
        加密
      </div>
      <div class="write-email-input-wrapper">
        <span>发件人：</span>
        <a-select
            v-model:value="formData.addresser"
            style="width: 216px"
        >
          <a-select-option value="1299563700@qq.com">1299563700@qq.com</a-select-option>
          <a-select-option value="yangguipeng@df-emall.com">yangguipeng@df-emall.com</a-select-option>
        </a-select>
      </div>
      <div v-if="lockChecked" class="write-email-input-wrapper lock-tip">
        <b-icon type="lock"></b-icon> 邮件内容已加密(RSA)
      </div>
      <div class="write-email-input-wrapper">
        <span>收件人：</span>
        <span v-for="(item, index) in formData.addressee" :key="index" class="user-item">
          <a-input style="width: 100%;" v-model:value="item.value" />
          <span>{{ item.value }}</span>
          <close-outlined />
        </span>
        <a-input />
        <span class="add-send">
          <span style="margin-right: 16px;" @click="sendDuplicate = true">抄送</span>
          <span @click="sendOfSecret = true">密送</span>
        </span>
      </div>
      <div v-show="sendDuplicate" class="write-email-input-wrapper">
        <span>抄送：</span>
        <span v-for="(item, index) in formData.addressee" :key="index" class="user-item">
          <a-input style="width: 100%;" v-model:value="item.value" />
          <span>{{ item.value }}</span>
          <close-outlined />
        </span>
        <a-input />
      </div>
      <div v-if="sendOfSecret" class="write-email-input-wrapper">
        <span>密送：</span>
        <span v-for="(item, index) in formData.addressee" :key="index" class="user-item">
          <a-input style="width: 100%;" v-model:value="item.value" />
          <span>{{ item.value }}</span>
          <close-outlined />
        </span>
        <a-input />
      </div>
      <div class="write-email-input-wrapper">
        <span>主题:</span>
        <a-input style="color: #333333; font-weight: 600;" placeholder="邮箱主题" />
      </div>
      <div class="email-write-content">
        <Editor ref="editor" v-if="editorVisible"/>
      </div>
      <div class="attach-wrapper">
        <div class="attach-wrapper-title">附件(4)</div>
        <ul>
          <li><b-icon type="attach"></b-icon> 177-envelope-ted.png (1.2MB)</li>
          <li><b-icon type="attach"></b-icon> 177-envelope-ted.png (1.2MB)</li>
          <li><b-icon type="attach"></b-icon> 177-envelope-ted.png (1.2MB)</li>
          <li><b-icon type="attach"></b-icon> 177-envelope-ted.png (1.2MB)</li>
        </ul>
        <div class="attach-action">
          <span><b-icon type="save"></b-icon> 存草稿</span>
          <span><b-icon type="attach"></b-icon>添加附件</span>
        </div>
      </div>
      <div class="submit-wrapper">
        <a-button type="primary" @click="submit">发送</a-button>
      </div>
    </div>
  </div>

</template>

<script setup>
import {onMounted, reactive, ref, watchEffect} from "vue";
import axios from "axios";
import Editor from "../components/Editor.vue";
import { ArrowLeftOutlined, CloseOutlined } from "@ant-design/icons-vue";
import {useRouter} from "vue-router";

const editorVisible = ref(false)
const editor = ref({})
const lockChecked = ref(false)
const sendDuplicate = ref(false) // 是否抄送
const sendOfSecret = ref(false) // 是否密送
const router = useRouter()

const formData = reactive({
  addresser: '',
  addressee: [
      {value: 'ceshideyouxiang@163.com', isEdit: false},
      {value: '1299563700@163.com', isEdit: false},
  ]
})

onMounted(() => {
  editorVisible.value = true
  axios({
    method: "get",
    url: "http://192.168.70.1:7777/",
  }).then(function ({ data }) {
    watchEffect(() => {
      if (editor.value) {
        setTimeout(() => {
          editor.value.setContent(data)
        }, 200)
      }
    })
  });
});

function submit() {
  console.log(getContent())
}

function getContent() {
  if (editor.value) {
    return editor.value.getContent()
  }
  return ''
}

function back() {
  router.back()
}
</script>

<style lang="less" scoped>
.write-email-wrapper{
  display: flex;
  padding-right: 136px;
  height: 100%;
  .back{
    padding: 8px 16px 0 8px;
    span{
      display: inline-block;
      width: 48px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #ffffff;
      &:hover{
        color: #ffffff;
        background: @primary-color;
        cursor: pointer;
      }
    }
  }
}
.write-email-page {
  position: relative;
  height: calc(100vh - 92px);
  padding: 0 24px 0px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  height: 100%;
  .write-email-input-wrapper {
    display: flex;
    align-items: center;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #eeeeee;
    >span{
      flex-shrink: 0;
      margin-right: 6px;
      color: #666;
    }
    .ant-input {
      border: none;
    }
    .ant-input:focus,
    .ant-input-focused {
      box-shadow: none;
    }
    :deep(.ant-switch-handle::before){
      background: url('../assets/imgs/lock.svg') #ffffff no-repeat center;
      background-size: 85%;
      background-position-x: 1px;
    }
    :deep(.ant-switch:not(.ant-switch-disabled):active.ant-switch-checked .ant-switch-handle:before) {
      left: 0;
    }
    :deep(.ant-switch:not(.ant-switch-disabled):active .ant-switch-handle::before) {
      right: 0;
    }

    &.lock-tip{
      color: @primary-color;
      .anticon{
        font-size: 16px;
        color: inherit;
      }
    }
  }

  .attach-list-wrapper {
    height: 60px;
    line-height: 60px;
    padding-left: 55px;
    border-bottom: 1px solid @border-color-base;
  }

  .submit-wrapper {
    width: 100%;
    background-color: #ffffff;
    padding: 12px 0 16px 24px;
    border-top: 1px solid #eeeeee;
    text-align: right;
  }

  .email-write-content {
    flex-grow: 1;
  }

  span.email-send-type{
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    margin-right: 16px;
  }
  span.user-item{
    position: relative;
    height: 28px;
    line-height: 30px;
    margin-right: 12px;
    .ant-input{
      position: absolute;
      width: 100%;
      left: 0;
      top: 0;
      background: #F5F6F8;
    }
    &>span{
      height: 28px;
      padding: 0 11px;
      display: inline-block;
    }
    .anticon{
      height: auto;
      z-index: 99;
      position: relative;
      top: 1px;
      padding-left: 0;
      cursor: pointer;
      &:hover{
        color: @primary-color;
      }
    }
  }
  .add-send{
    span{
      &:hover{
        color: @primary-color;
        cursor: pointer;
      }
    }
  }
}
.attach-wrapper{
  padding-bottom: 16px;
  .attach-wrapper-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
      padding: 0 16px;
      flex-shrink: 0;
      width: calc(50% - 8px);
      margin-bottom: 12px;
      height: 30px;
      line-height: 30px;
      background: #F9FAFD;
      border-radius: 15px;
    }
  }
  .attach-action{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    background: #F5F6F8;
    border-radius: 4px;
    padding: 0 16px;
    span{
      display: inline-flex;
      align-items: center;
      &:first-child{
        margin-right: 24px;
      }
      &:hover{
        color: @primary-color;
        cursor: pointer;
        .anticon{
          color: inherit;
        }
      }
      .anticon{
        margin-right: 3px;
        font-size: 18px;
      }
    }
  }
}
</style>
